<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 1.在页面上根据数据，动态创建表格
var arr = [ { name: 'Jack', age: 18, gender: '男' },{ name: 'Rose', age: 20, gender: '女' },{ name: 'Top', age: 22, gender: '男' } ] 创建一个表格，展示上面数组中的信息 -->
<style>
    div {
        width: 100%;
        text-align: center;
    }

    table {
        margin-top: 50px;
    }

    td {
        height: 50px;
        text-align: center;
    }
</style>

<body>
    <div>
        <input id="name" type="text" name="int_name" value="name">
        <input id="age" type="text" name="int_age" value="age">
        <input id="gender" type="text" name="int_gender" value="gender">
        <button id="add">添加</button>
    </div>
    <table class="tab" border="1px" cellspacing="0" width="500px" align="center">
        <caption>人员信息登记表</caption>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr>
            <td class="content_1"></td>
            <td class="content_2"></td>
            <td class="content_3"></td>
        </tr>
    </table>
    <script>
        function createPerson(name, age, gender) {
            var obj = {
                name: name,
                age: age,
                gender: gender,
            }
            return obj;
        }
        document.getElementById("add").onclick = function () {
            var name = document.getElementById("name").value;
            var age = document.getElementById("age").value;
            var gender = document.getElementById("gender").value;
            var obj = createPerson(name, age, gender);
            var tab = document.getElementsByClassName("tab")[0];
            var content_1 = document.getElementsByClassName("content_1");
            var content_2 = document.getElementsByClassName("content_2");
            var content_3 = document.getElementsByClassName("content_3");
            content_1.innertext = "obj.name";
        }

    </script>
</body>

</html>